CSS Specificity

    In this CSS tutorial, we will be going to learn what is Specificity in CSS, and how CSS resolves the conflict of two different stylings pointing to the same element.

    What is Specificity?

    If there are more than one style rules or code is specified for the same element then the browser uses a set of rules to determine which style code should be applied to the Element. And the Specificity helps the browser to determine the right style code for the element. Specificity is a concept used by the browser to determine which style code should be applied to the element if there is more than one. You can think of Specificity as the precedence parameter, for instance, CSS * (universal selector) has lower specificity than ID (#) selector.

    Hierarchy of Specificity

    The hierarchy of Specificity is based on the level of a CSS selector, and there are four stages in the Specificity Hierarchy represented by 4 types of Selectors

    • Inline Style
    • IDs
    • Classes, attributes, and pseudo-classes
    • Elements and pseudo-elements

    Inline Styling is directly mentioned within the element tag, that’s why it has the highest specificity.

    IDs come in the second position because of their unique value with every element.

    Classes, attributes, and pseudo-classes have lower specificity then IDs

    Elements and pseudo-elements have the lowest specificity.

    Specificity Calculator

    The specificity of a selector is determined by the browser and the browser performs some calculation on the selector to calculate the specificity score. The more the score value is the more will be the specificity of the selector. The specificity score range starts from 0 to 1000

    • Inline style attribute has a specificity score of 1000
    • ID has a specificity score of 100
    • Classes, attributes, and pseudo-classes have a specificity score of 10
    • Elements and pseudo-elements have a specificity score of 1

    Example 

    A :p { }
B: #para p { }
C: <p style= "color: red "> Paragraph<>
    • A specificity score is 1 (p element )
    • B specificity score is 101 (one id #para + 1 element para p )
    • C specificity score is 1000 (inline styling)

    Equal Specificity Latest Rule

    If there are two selectors for the same element and their specificity score is also equal, then the browser will select the latest selector for the styling.

    Example 

    <!DOCTYPE html>
<html>
<head>
  <style>
    p{
      color: red;
    }
   p{
      color: green;
    }
  </style>
</head>
<body>
    <p>This Paragraph will have green color</p>
</body>
</html>

    Summary

    • Specificity defines which styling should be applied to the element if more than one styling is defined for the same element.
    • Specificity calculates a score based on the selector.
    • The inline style has the highest specificity score value.
    • element selector has the lowest score value.
    • If the specificity score of two selectors is also the same then the latest rule applies on the selector, in which the latest defined CSS styling applied on the element.
    Previous Tutorial Next Tutorial